/**
 * Created by chentao on 2018/1/2.
 */

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Text, View, Image, TouchableOpacity, StyleSheet } from 'react-native'
import {
  unitWidth,
  width,
  titleHeight,
  statusBarHeight,
  textSize16,
} from '../utils/AdapterUtil'

import StatusBarWhiteSpace from './StatusBarWhiteSpace'

import * as Color from '../configs/Color'
import Images from '../assets/images/public'

// 自定义titleBar
export default class TitleBar extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigation: PropTypes.object.isRequired,
    hideLeftArrow: PropTypes.bool,
    pressLeft: PropTypes.func,
    pressCenter: PropTypes.func,
    pressRight: PropTypes.func,
    backgroundColor: PropTypes.string,
    titleColor: PropTypes.string,
    right: PropTypes.string,
    rightImage: Image.propTypes.source,
    titleHeight:PropTypes.number
  }

  static defaultProps = {
    hideLeftArrow: false,
    pressRight: () => {},
    pressCenter: () => {},
  }

  // 执行返回
  back() {
    if (this.props.pressLeft) {
      this.props.pressLeft()
      return
    }
    this.props.navigation.goBack() // 返回上一个页面
  }

  render() {
    const { backgroundColor, titleColor } = this.props
    return (
      <View
        style={{
          width,
          height:!!this.props.titleHeight||this.props.titleHeight==0?(this.props.titleHeight + statusBarHeight):(titleHeight+statusBarHeight),
          backgroundColor: backgroundColor || Color.titleBarBackground,
        }}
      >
        <StatusBarWhiteSpace />
        <View
          style={{
            justifyContent: 'space-between',
            flexDirection: 'row',
            alignItems: 'center',
            width,
            height: titleHeight,
            backgroundColor: backgroundColor || Color.titleBarBackground,
          }}
        >
          {this.props.hideLeftArrow ? (
            <View style={TitleBarStyle.left} />
          ) : (
            <TouchableOpacity
              activeOpacity={1}
              onPress={this.back.bind(this)}
              style={TitleBarStyle.left}
            >
              <Image
                style={TitleBarStyle.titleLeftImage}
                source={Images.arrow_left}
              />
              <Text style={TitleBarStyle.leftText}>{this.props.left}</Text>
            </TouchableOpacity>
          )}
          <View style={TitleBarStyle.middle}>
            <TouchableOpacity
              activeOpacity={1}
              onPress={() => {
                this.props.pressCenter()
              }}
            >
              <Text
                numberOfLines={1}
                style={[
                  TitleBarStyle.middleTitle,
                  titleColor ? { color: titleColor } : null,
                ]}
              >
                {this.props.title}
              </Text>
            </TouchableOpacity>
          </View>
          {this.renderRight()}
        </View>
      </View>
    )
  }

  renderRight() {
    if (!this.props.right) {
      return <View style={TitleBarStyle.right} />
    }
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={TitleBarStyle.right}
        onPress={() => {
          this.props.pressRight()
        }}
      >
        {typeof this.props.right === 'object' ? (
          this.props.right
        ) : (
          <Text style={TitleBarStyle.rightText}>{this.props.right}</Text>
        )}
        {this.props.rightImage ? (
          <Image
            style={TitleBarStyle.rightImage}
            source={this.props.rightImage}
          />
        ) : null}
      </TouchableOpacity>
    )
  }
}

const TitleBarStyle = StyleSheet.create({
  background: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: titleHeight,
    backgroundColor: Color.titleBarBackground,
    alignItems: 'center',
    width,
  },
  left: {
    width: unitWidth * 125,
    height: unitWidth * 72,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingLeft: unitWidth * 15,
  },
  middle: {
    flex: 1,
    height: unitWidth * 72,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  right: {
    width: unitWidth * 125,
    height: unitWidth * 72,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingRight: unitWidth * 15,
  },

  leftText: {
    fontSize: textSize16,
    color: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  middleTitle: {
    fontSize: textSize16,
    color: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightText: {
    fontSize: textSize16,
    color: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightImage: {
    width: unitWidth * 24,
    height: unitWidth * 24,
    resizeMode: 'contain',
    marginLeft: unitWidth * 5,
  },
  titleLeftImage: {
    width: unitWidth * 17,
    height: unitWidth * 34,
    marginRight: unitWidth * 5,
    resizeMode: 'contain',
  },
  homeTitleIcon: {
    width: unitWidth * 110,
    height: unitWidth * 26,
    resizeMode: 'stretch',
  },
  titleRightImage: {
    marginTop: -4 * unitWidth,
    marginRight: unitWidth * 5,
    width: unitWidth * 15,
    height: unitWidth * 30,
    resizeMode: 'contain',
  },
})
